<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: data.length == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
  // const elementResizeDetectorMaker = require("element-resize-detector");
  export default {
    computed: {
      // ...mapGetters(["echartsColor"]),
    },
    watch: {
      data: "drawLine", // 数值变化是更新图表
      color: "drawLine", // 数值变化是更新图表
      legendLeft: "drawLine", // 数值变化是更新图表
      title: "drawLine", // 数值变化是更新图表
      titleTop: "drawLine", // 数值变化是更新图表
      titleSize: "drawLine", // 数值变化是更新图表
      titleLeft: "drawLine", // 数值变化是更新图表
      subtextTitle: "drawLine", // 数值变化是更新图表
      subtextTitleSize: "drawLine", // 数值变化是更新图表
      subtextTitleLeft: "drawLine", // 数值变化是更新图表
      subtextTitleTop: "drawLine", // 数值变化是更新图表
      showLegend: "drawLine", // 数值变化是更新图表
    },
    props: {
      color: {
        // 传入的颜色
        type: Array | Object,
        default: function () {
          return [];
        },
      },
      legendLeft: {
        // 图例左侧位置
        type: String,
        default: "65%",
      },

      legendUnit: {
        // 图例单位
        type: String,
        default: "%",
      },
      title: {
        // 标题
        type: String,
        default: "标题",
      },

      titleTop: {
        // 标题上下位置
        type: String,
        default: "middle",
      },
      titleLeft: {
        // 标题左右位置
        type: String,
        default: "",
      },
      titleSize: {
        // 标题大小
        type: Number | String,
        default: 14,
      },
      subtextTitle: {
        // 副标题
        type: [String, Number],
        default: "",
      },
      subtextTitleTop: {
        // 标题上下位置
        type: String,
        default: "middle",
      },
      subtextTitleLeft: {
        // 标题左右位置
        type: String,
        default: "24%",
      },
      subtextTitleSize: {
        // 标题大小
        type: [String, Number],
        default: 14,
      },
      showLegend: {
        // 是否显示图例
        type: Boolean,
        default: true,
      },
      data: {
        // 返回的数据
        type: Array | Object,
        default: function () {
          return [
            {
              value: 520,
              name: "温度",
            },
            {
              value: 345,
              name: "湿度",
            },
            {
              value: 234,
              name: "UPS",
            },
            {
              value: 123,
              name: "门禁",
            },
            {
              value: 100,
              name: "消防",
            },
          ];
        },
      },
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        try {
          var cw = document.body.clientWidth;
          this.$nextTick(() => {
            let myChart = this.$echarts.init(this.$refs.echarts_box);
            let data = this.data

            let color = ['#00C3FF', '#563AD2', '#DE8536', '#ED5450']
            let option = {
              //你的代码
              backgroundColor: '#081736',
              color: color,
              tooltip: {
                trigger: 'item'
              },
              legend: {
                show: false,
                bottom: '20%',
                itemWidth: 10,
                itemHeight: 10,
                icon: 'circle',
                itemGap: 40,
                textStyle: {
                  color: 'rgba(68, 68, 69, 1)',
                  fontSize: '14',
                },
              },
              series: [
                {
                  type: 'pie',
                  data: data,
                  center: ['50%', '50%'],
                  radius: ['40%', '60%'],
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'outside',
                        color: color.map(item => {
                          return item
                        }),
                        padding: [0, -100, 0, -100],
                        fontSize: 13,
                        formatter: function (params) {
                          if (params.name !== '') {
                            return '{percent|' + params.name + '}\n{cir' + params.dataIndex + '|●}\n{name|' + params.value + ' 家' + '}';
                          } else {
                            return '';
                          }

                        },
                        rich: {
                          name: {
                            color: "#fff",
                            fontSize: 16,
                            align: 'center'
                          },
                          percent: {
                            fontFamily: 'DIN',
                            fontWeight: 500,
                            fontSize: 14,
                            color: '#fff',
                            align: 'center'
                          },
                          cir0: {
                            fontSize: 15,
                            opacity: 1,
                            color: 'rgba(69, 188, 238, 1)',
                            padding: [0, 92, 0, 92]
                          },
                          cir1: {
                            fontSize: 15,
                            opacity: 1,
                            color: 'rgba(120, 100, 239, 1)',
                            padding: [0, 92, 0, 92]
                          },
                          cir2: {
                            fontSize: 15,
                            opacity: 1,
                            color: 'rgba(255, 107, 100, 1)',
                            padding: [0, 92, 0, 92]
                          },
                          cir3: {
                            fontSize: 15,
                            opacity: 1,
                            color: 'rgba(255, 173, 77, 1)',
                            padding: [0, 92, 0, 92]
                          }
                        }
                      },
                      labelLine: {
                        length: 27,
                        length2: 30,
                        show: true,
                        color: '#00ffff'
                      }
                    }
                  },
                  name: '',
                  hoverAnimation: false,
                }
              ]
            };
            myChart.setOption(option);
            /* 大小自适应 */
            window.addEventListener("resize", () => {
              // h = this.$refs.echarts_box.offsetHeight;
              // console.log(h);
              myChart.resize();
            });
            myChart.resize();
          });
        } catch (e) {
          console.log(e);
          // 错误处理代码片段
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts_box {
    width: 100%;
    height: 100%;
    position: relative;

    .Nodata {
      position: absolute;
      top: 0;
      z-index: 10;
    }
  }
</style>